﻿@model dynamic
@using Kooboo.CMS.Web
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="@Url.Action("Localization", "StyleEditing", new { siteName = ViewBag.SiteName, _draft_ = ViewBag._draft_ })"></script>
    <sciprt src="//cdn.jsdelivr.net/jquery/2.0.3/jquery-2.0.3.js" type="text/javascript"></sciprt>
    @Html.ExternalResources("styleEditingCss")
    @Html.ExternalResources("styleEditingJs")
    <script type="text/javascript" id="styleditor">

        $(function () {

            var timeoutId;
            var showMessage = function (message) {
                clearTimeout(timeoutId);
                $('.header span.message').html(message).show();
                timeoutId = setTimeout(function () { $('.header span.message').hide(); }, 2000);
            };

            var editor = visualstyle.create({
                renderTo: $('#container'),
                btnUndo: $('.btnUndo'),
                btnRedo: $('.btnRedo'),
                effectWin: top.effectWin
            });
            var excuteAfterStyleLoaded = function () {
            	editor.components.selectors.doSelect({ index: 0 });
            	editor.loader.onLoad.remove(excuteAfterStyleLoaded);
            }

            editor.onError.add(function () { showMessage('Load failure!'); });
            var effect = editor.getComponent('effect');
            var lastSelectedText, lastSelectedValue;
            var loadCurrent = function () {
                lastSelectedText = $('.cssfiles').find('option:selected').text();
                lastSelectedValue = $('.cssfiles').find('option:selected').val();
            	//if (lastSelectedValue) { editor.loadFile(lastSelectedValue); }
                if (lastSelectedValue) {
                    editor.loadFile(lastSelectedValue);
                    editor.loader.onLoad.add(excuteAfterStyleLoaded);
                }
            };

            $('input.btnSave').click(function () {
                $.ajax({
                    url: '@Url.Action("SaveFile", "StyleEditing", new { siteName = ViewBag.SiteName, _draft_ = ViewBag._draft_ })',
                    data: {
                        filePath: $('.cssfiles').val(),
                        fileContent: editor.getValue()
                    },
                    type: 'post', dataType: 'json', timeout: 30000,

                    //complete: function (request, state) { },


                })//.beforeSend(function (request) { editor.applyLock(); })
                    .success(function (d, state) {
                    if (d.Success) {
                        showMessage('@("Save success!".Localize())');
                            if (effect.ruleManager) { effect.ruleManager.persistenceChanges(); }
                            setTimeout(loadCurrent, 16);
                        } else {
                            showMessage('@("Save failure!".Localize())');
                            editor.releaseLock();
                    }
                    })
                .error(function(){
                });
            });

            $('.cssfiles').change(function () {
                if (editor.isChanged() && confirm(String.format('@("[{0}] has been changed, do you want to save?".Localize())', lastSelectedText.trim()))) {
                    $(this).val(lastSelectedValue);
                    $('input.btnSave').triggerHandler('click');
                } else {
                    loadCurrent();
                }
            });

            $('input.btnReload').click(function () {
                if (!editor.isChanged()) {
                    loadCurrent();
                } else if (confirm(String.format('@("[{0}] has been changed, are you sure you want to reload?".Localize())', lastSelectedText.trim()))) {
                    loadCurrent();
                }
            });

            /* Modified by Jinfeng 2013-12-10
            * create a global function to make parent can detect isChanged variable
            * fixBug: "Cancel" will not give a confirm chance when something changed
            */
            window.cancelConfirm = function () {
                if (editor.isChanged()) {
                    return confirm(String.format('@("[{0}] has been changed, are you sure you want to cancel?".Localize())', lastSelectedText.trim()));
                } else {
                    return true;
                }
            }

            loadCurrent();
        });
    </script>
</head>
<body style="background-color: #fff;">
    <div class="header">
        <span style="color: #000; font-weight: bold; font-size: 14px;">
            @string.Format("CSS files of site [{0}]:".Localize(), ViewBag.SiteName)</span>
        <select class="cssfiles">
            @foreach (var item in ViewBag.CssFiles)
            {
            <option value="@Html.Raw(Url.Content(item))">
                @System.IO.Path.GetFileName(item)</option>
            }
        </select>
        <input type="button" class="btnReload" value="@("Reload".Localize())" />
        <span class="message" style="color: Red; font-weight: bold; font-size: 14px;"></span>
    </div>
    <div id="container" style="margin-top: 6px;">
    </div>
    <div class="footer">
        <!--
        <p style="float: left">
            <input type="button" class="btnUndo" value="@("Undo".Localize())" />
            <input type="button" class="btnRedo" value="@("Redo".Localize())" />
        </p>
        -->
        <p>
            <input type="button" class="btnSave" value="@("Save".Localize())" />
            <input type="button" class="btnCancel white dialog-close" value="@("Cancel".Localize())" />
        </p>
    </div>
</body>
</html>
